<template>
  <div class="container">
    <!-- 数据大屏数据展示区域 -->
    <div ref="screen" class="screen">
      <!-- 数据大屏顶部 -->
      <div class="top">
        <Top />
      </div>
      <div class="bottom">
        <el-row>
          <el-col :span="6">
            <div class="left">
              <Tourist class="tourist" />
              <Sex class="sex" />
              <Age class="age" />
            </div>
          </el-col>
          <el-col :span="12">
            <div class="center">
              <Map class="map" />
              <Line class="line" />
            </div>
          </el-col>
          <el-col :span="6">
            <div class="right">
              <Rank class="rank" />
              <Year class="year" />
              <Counter class="counter" />
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, onBeforeMount } from 'vue'
// 引入顶部组件
import Top from './components/top/index.vue'
// 引入左侧三个组件
import Tourist from './components/tourist/index.vue'
import Sex from './components/sex/index.vue'
import Age from './components/age/index.vue'
// 引入中间的俩组件
import Map from './components/map/index.vue'
import Line from './components/line/index.vue'
// 引入右侧三个子组件
import Rank from './components/rank/index.vue'
import Year from './components/year/index.vue'
import Counter from './components/counter/index.vue'

// 获取数据大屏内容的 DOM 元素
const screen = ref()

onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
})

// 定义大屏的缩放比例
const getScale = (w: number = 1920, h: number = 1080) => {
  const ww = window.innerWidth / w
  const wh = window.innerHeight / h
  return ww < wh ? ww : wh
}

// 监听窗口的变化
window.onresize = () => {
  if (!!screen.value) {
    screen.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  }
}

// 销毁之前 清除定时器
onBeforeMount(() => {
  screen.value = ''
})
</script>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background: url('./images/bg.png') no-repeat;
  background-size: cover;
  .screen {
    position: fixed;
    top: 50%;
    left: 50%;
    // 按照设计稿设置 (现设置为 1920 * 1080)
    width: 1920px;
    height: 1080px;
    transform-origin: left top;
    // background: #bfa;
    .top {
      width: 100%;
      height: 40px;
    }
    .bottom {
      .el-row {
        .el-col {
          .left {
            height: 1040px;
            display: flex;
            flex-direction: column;
            .tourist {
              flex: 1.3;
            }
            .sex {
              // background-color: aquamarine;
              flex: 1;
            }
            .age {
              // background-color: aqua;
              flex: 1;
            }
          }
          // 中间内容
          .center {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            .map {
              flex: 4;
              // background-color: #bfa;
            }
            .line {
              flex: 1;
              // background-color: #acc;
            }
          }
          .right {
            // width: 100%;
            // height: 100%;
            height: 1040px;
            display: flex;
            flex-direction: column;
            .rank {
              flex: 1.3;
            }
            .year {
              // background-color: aquamarine;
              flex: 1;
            }
            .counter {
              // background-color: aqua;
              flex: 1;
            }
          }
        }
      }
    }
  }
}
</style>
